<template>
    <div>
        <ToolBar>
            <div>
                <el-button type="primary" size="small" @click="showEditDialog = true">添加用户</el-button>
            </div>
            <div>
                <el-input placeholder="请输入用户名" size="small" style="width: 140px" v-model="searchParams.title" clearable>
                </el-input>
                <el-select v-model="searchParams.type" clearable style="width: 140px" placeholder="请选择用户类型"
                    size="small">
                    <el-option v-for="item in goodsTypeData" :key="item.id" :label="item.typename" :value="item.id">
                    </el-option>
                </el-select>
                <el-button type="success" size="small" @click="refresh()">查询</el-button>
                <el-button type="warning" size="small" @click="clearSearchParams()">重置</el-button>
            </div>
        </ToolBar>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="password" label="密码"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="nickname" label="昵称"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
                <div slot-scope="s">
                    <!-- <el-tooltip :content="stateValue" placement="top">
            <el-switch
              v-model="stateValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="2"
              inactive-value="1"
              @change="updateState(s.row.id)"
            ></el-switch>
          </el-tooltip>-->
                    <el-button type="primary" size="small" @click="editItem(s.row.id)">编辑</el-button>
                    <el-button type="danger" size="small" @click="updateState(s.row.id, 0)">删除</el-button>

                </div>
            </el-table-column>
        </el-table>
        <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="total"
            @current-change="changePage"></el-pagination>
        <!--    <Pagination-->
        <!--      :params="searchParams"-->
        <!--      :requestFunc="requestFunc"-->
        <!--      ref="pagination"-->
        <!--      @returnData="returnData"-->
        <!--    />-->
        <Edit :showEditDialog="showEditDialog" @close="showEditDialog = false" @success="refresh()" />
    </div>
</template>

<script>
import { list } from "@/api/user/userlist";
import { resetObject } from "@/utils/common";
import { todelUser } from "@/api/user/userlist"
import Edit from "./Edit.vue";
export default {
    data() {
        return {

            pageSize: 2, //每页显示5条
            total: 0, //总条数
            pageNo: 1, //默认当前页码第1页
            searchParams: {
                title: "",
                type: ""
            },
            showEditDialog: false,
            tableData: [],
            goodsTypeData: [],
            id: null,
            stateValue: 1
        };
    },
    created() {
        this.initData(); //页面加载就初始化用户数据，默认选第一页的数据
    },
    methods: {
        changePage(val) {
            //val:改变页码当前的页码
            this.pageNo = val;
            this.initData(); //根据新的页码选取分页数据
        },
        initData() {
            list()
                .then(r => {
                    console.log(r);
                    this.tableData = r;
                    ;
                    //   this.total = r.count;
                })
                .catch(() => { });

        },
        editItem(id) {
            this.id = id;
            this.showEditDialog = true;
        },

        refresh() {
            this.initData();
        },
        returnData(pageList) {
            this.tableData = pageList.list;
        },
        clearSearchParams() {
            resetObject(this.searchParams);
            this.refresh();
        },
        updateState(id, newstate) {
            if (newstate == 0) {
                //删除
                this.$confirm("确定删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        console.log(id);
                        todelUser({ "id": id });
                        this.initData();
                        location.reload();
                    })
                    .catch(() => { });
            }
        },
        updateStateApi(id, newstate) {
            console.log(id, newstate);

            // row.d = 0;
            // updateStatus({ id: row.id})
            //   .then(r => {
            //     this.$message({
            //       type: "success",
            //       message: "操作成功!"
            //     });
            //     this.refresh();
            //   })
            //   .catch(() => {});
        }
    },

    components: { Edit }
};
</script>
